<template>
  <div style="height: 100%">
    <a-spin :spinning="isTableLoading" wrapperClassName="spinning-container">
      <div class="header-container" ref="headerContainer">
        <page-header :title="l('Editions')"></page-header>
        <!-- 表格部分 -->
        <a-card :bordered="false">
          <!-- 操作部分 -->
          <a-row :gutter="8">
            <a-col :md="20" :sm="12" class="btn-gutter">
              <a-button
                @click="createOrEdit()"
                type="primary"
                v-if="isGranted('Pages.Editions.Create')"
              >
                <plus-outlined />
                <span>{{ l('CreateNewEdition') }}</span>
              </a-button>
            </a-col>
          </a-row>
          <!-- 数据部分 -->
          <div class="my-md">
            <a-alert :showIcon="true" type="info">
              <template #message>
                <span v-html="l('GridSelectedXItemsTips', selectedRowKeys.length)"></span>
                <a @click="restCheckStatus()" class="ml-md">
                  {{ l('ClearEmpty') }}
                </a>
                <a-divider type="vertical"></a-divider>
                <a @click="refresh()">
                  {{ l('Refresh') }}
                </a>
              </template>
            </a-alert>
          </div>
        </a-card>
      </div>
      <!-- 表格 -->
      <div class="table-container">
        <a-table
          size="middle"
          :scroll="{ x: tableWidthScroll, y: tableHeightScroll }"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data-source="dataList"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            checkAll: checkAll,
          }"
          :pagination="false"
          @change="tableChange"
        >
          <template #bodyCell="{ column, record }">
            <!-- 创建时间 -->
            <template v-if="column.key === 'creationTime'">
              {{ _moment(record.creationTime) }}
            </template>
            <template v-if="column.key === 'Actions'">
              <a @click="createOrEdit(record)">
                <edit-outlined />
                <span>{{ l('Edit') }}</span>
              </a>
              <a-divider type="vertical" />
              <a-popconfirm
                :cancel-text="l('Cancel')"
                :ok-text="l('Ok')"
                :title="l('ConfirmDeleteWarningMessage')"
                @confirm="onDelete(record)"
              >
                <a href="#">
                  <delete-outlined />
                  <span>{{ l('Delete') }}</span>
                </a>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts">
  import { PagedListingComponentBase } from '/@/shared/component-base';
  import { EditionListDto, EditionServiceProxy } from '/@/shared/service-proxies';
  import CreateOrEditEdition from './create-or-edit-edition/create-or-edit-edition.vue';
  import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  import { ColumnType } from 'ant-design-vue/lib/table';
  import { IPagedRequestDto } from '/@/shared/component-base/interfaces';
  export default defineComponent({
    name: 'editions',
    components: {
      PlusOutlined,
      DeleteOutlined,
      EditOutlined,
    },
    mixins: [PagedListingComponentBase],
    data() {
      return {
        editionService: new EditionServiceProxy(),
        dataList: [] as EditionListDto[],
      };
    },

    methods: {
      /** 获取列 */
      getColumns(): ColumnType<EditionListDto>[] {
        return [
          {
            title: 'No',
            customRender: ({ index }) => {
              const a = (this.pageNumber - 1) * this.pageSize + (index + 1);
              return a;
            },
            width: 60,
            fixed: 'left',
          },
          {
            title: this.l('Edition'),
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
          },
          {
            title: this.l('EditionName'),
            dataIndex: 'displayName',
            key: 'displayName',
            ellipsis: true,
          },
          {
            title: this.l('CreationTime'),
            dataIndex: 'creationTime',
            key: 'creationTime',
            sorter: {
              multiple: 0,
            },
            ellipsis: true,
          },
          {
            title: this.l('Actions'),
            dataIndex: 'Actions',
            key: 'Actions',
            ellipsis: true,
            fixed: 'right',
            align: 'center',
            width: 250,
          },
        ];
      },
      /** 创建 */
      createOrEdit(entityId?: EditionListDto): void {
        this.modalHelper
          .create(CreateOrEditEdition, {
            editionIds: entityId ? entityId.id : null,
          })
          .subscribe((res) => {
            if (res) {
              this.refresh();
            }
          });
      },
      /** 删除版本 */
      onDelete(entity: EditionListDto): void {
        this.message.confirm(
          this.l('EditionDeleteWarningMessage', entity.displayName),
          '',
          (isConfirmed) => {
            if (isConfirmed) {
              this.editionService.deleteEdition(entity.id).then(() => {
                this.refresh();
                this.notify.success(this.l('SuccessfullyDeleted'));
              });
            }
          },
        );
      },
      /** 获取数据 */
      fetchDataList(request: IPagedRequestDto, finishedCallback: () => void) {
        // 获取数据抽象接口，必须实现
        this.editionService
          .getEditions()
          .finally(() => {
            finishedCallback()!;
          })
          .then((res) => {
            this.showPaging({
              items: res.items,
              totalCount: res.items?.length || 0,
            });
          });
      },
      /**
       * 批量删除
       * todo
       * 接口暂缺
       */
      batchDelete(): void {
        const selectCount = this.selectedRowKeys.length;
        if (selectCount <= 0) {
          abp.message.warn(this.l('PleaseSelectAtLeastOneItem'));
          return;
        }
        const aaa = this.l('ConfirmDeleteXItemsWarningMessage', 1);
        this.message.confirm(aaa, () => {});
      },
    },
  });
</script>

<style scoped lang="less">
  .list-table {
    white-space: nowrap;
  }
  .ant-table-body i {
    margin-right: 10px;
  }
</style>
